import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, List, Provider, Radio, Toast} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import {getOrderBookForProject, setParkingPackage} from '~/api/order';
import {getParkingDataInfo, getParkingPlanPackageByItemID} from '~/api/parking';
import {connect} from 'react-redux';
import {initParkOrder, saveParkOrder} from '~/store/parkorder';
import {saveSystem} from '~/store/system';
import {getOwnerHouseBuilding} from '~/api/owner';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
        parkorder: state.parkorder,
    };
};
const mapSetter = (dispatch) => {
    return {
        onparkSave: (data) => {
            dispatch(saveParkOrder(data));
        },
        initParkOrder: () => {
            dispatch(initParkOrder());
        },
    };
};
const RadioItem = Radio.RadioItem;
class Getgift extends Component {
    static navigationOptions = {
        title: '套餐列表',
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            parkingid: this.props.parkorder.parkingid,
            packageid: this.props.parkorder.packageid || 0,
            packagename: '',
            checked: false,
            packagelist: [],
            packageradio: this.props.packageradio || 0, //0为可选择 1为查看不可选择
            parkingitemid: this.props.parkingitemid || 0,
        };
        this.getPackageList();
    }

    getPackageList = () => {
        getParkingPlanPackageByItemID(
            this.state.parkingitemid === 0 ? this.props.parkorder.parkingplanitem.ParkingPlanItemID : this.state.parkingitemid,
        ).then((r) => {
            if (r.code === 0) {
                this.setState({
                    packagelist: r.data,
                    part1Value: 0,
                });
            } else {
                Toast.info(r.msg);
            }
        });
    };
    render() {
        return (
            <View style={{width: '92%', marginRight: '4%', marginLeft: '4%', borderRadius: 10, marginTop: 10}}>
                <View style={{width: '100%', backgroundColor: '#FFFFFF', borderRadius: 10, marginBottom: 10}}>
                    <Flex style={{marginTop: 14.5, marginBottom: 10, paddingLeft: '2%', paddingRight: '2%'}}>
                        <Image style={{width: 4, height: 14}} source={require('~/assets/public/tupic.png')} />
                        <Text style={{fontSize: 16, paddingLeft: 3}}>选择赠品套餐</Text>
                    </Flex>
                    <View style={{width: '100%', height: 2, borderBottomWidth: 1.5, borderColor: '#f5f5f5'}} />
                    <View style={{width: '100%', borderRadius: 10}}>
                        {this.state.packagelist.map((item) => {
                            return (
                                <View style={{width: '100%', height: 95, backgroundColor: 'white', borderWidth: 0.5, borderColor: '#F8F8FF'}}>
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('GiftList', {
                                                params: item.OrderDataID,
                                            });
                                        }}
                                        style={{width: '100%'}}>
                                        <View style={{paddingRight: 20, width: '30%', padding: 10}}>
                                            <Image
                                                style={{width: '100%', height: 75, aspectRatio: 1 / 1}}
                                                source={require('~/assets/public/packagegift.png')}
                                            />
                                        </View>
                                        <Flex style={{width: '70%', paddingRight: 15, marginTop: 20, marginBottom: 15}} justify={'between'}>
                                            <View style={{width: '85%'}}>
                                                <Flex>
                                                    <Text style={{fontSize: 15, fontWeight: 'bold'}}>{item.PackageName}</Text>
                                                    <Text style={{borderRightWidth: 1, width: 2, height: 15, marginLeft: 5, marginRight: 5}} />
                                                    <Text style={{fontSize: 15, color: '#ec4f46'}}>{item.PriceMarketTotal}元</Text>
                                                </Flex>
                                                <Text numberOfLines={2} style={{color: 'gray', fontSize: 10}}>
                                                    冰箱，洗衣机，空调，电视机，茶几阿斯利康解放拉萨的解放拉萨的解放拉萨
                                                </Text>
                                            </View>
                                            {this.state.packageradio === 0 && (
                                                <Flex style={{width: '15%', paddingLeft: 5, height: 20}}>
                                                    {this.state.packageid === item.OrderDataID ? (
                                                        <RadioItem
                                                            style={{
                                                                width: 20,
                                                                height: 20,
                                                                borderWidth: 1,
                                                                borderRadius: 10,
                                                                borderColor: '#EC4F46',
                                                                backgroundColor: '#EC4F46',
                                                            }}
                                                            onChange={(event) => {
                                                                if (event.target.checked) {
                                                                    this.setState({
                                                                        packageid: item.OrderDataID,
                                                                        packagename: item.PackageName,
                                                                    });
                                                                    this.props.onChange(item.OrderDataID, item.PackageName);
                                                                }
                                                            }}
                                                        />
                                                    ) : (
                                                        <RadioItem
                                                            style={{
                                                                borderWidth: 1,
                                                                borderRadius: 10,
                                                                borderColor: '#999999',
                                                                width: 20,
                                                                height: 20,
                                                            }}
                                                            onChange={(event) => {
                                                                if (event.target.checked) {
                                                                    this.setState({
                                                                        packageid: item.OrderDataID,
                                                                        packagename: item.PackageName,
                                                                    });
                                                                    this.props.onChange(item.OrderDataID, item.PackageName);
                                                                }
                                                            }}
                                                        />
                                                    )}
                                                </Flex>
                                            )}
                                        </Flex>
                                    </Flex>
                                </View>
                            );
                        })}
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        marginBottom: 20,
    },
    button1: {
        marginBottom: 20,
        backgroundColor: 'green',
    },
    images: {
        width: 100,
        height: 100,
        marginTop: 10,
    },
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 2,
    },
});
export default connect(mapGetter, mapSetter)(Getgift);
